<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06-图片切换-简易版</title>
<style type="text/css">

	*{
		padding:0;
		margin:50px auto;
	}

	#box{
		border:1px solid #ccc;
		height: 288px;
		width: 700px;
		padding-top: 200px;
		background:url('images/banner1.jpg') no-repeat;
	}
	
	ul li{
		display: inline-block;;
		margin-right:15px;
	}
	
	img{
		width: 118px;
		height: 120px;
		border: 1px solid red;
	}


</style>
</head>
<body>

<div id="box">
	<ul>
		<li id="item1">
			<img src="images/banner1.jpg" alt="">
		</li >

		<li id="item2">
			<img src="images/banner2.jpg" alt="">
		</li>

		<li id="item3">
			<img src="images/banner3.jpg" alt="">
		</li>

		<li id="item4">
			<img src="images/banner4.jpg" alt="">
		</li>

		<li id="item5">
			<img src="images/banner5.jpg" alt="">
		</li>

	</ul>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
	

//获取事件源
	function $(id){
		return typeof id === 'string' ? document.getElementById(id):null
	}
	
//设置函数，函数存在两个参数
	function changeBgcImg(liId,imgSrc){
		$(liId).onmouseover = function(){
			$('box').style.background = imgSrc
		}
	}


//函数方法的使用，内置每个方法的 id 和 背景图片,使用时将传参到函数并执行这个方法
	changeBgcImg('item1', "url('images/banner1.jpg') no-repeat")
	changeBgcImg('item2', "url('images/banner2.jpg') no-repeat")
	changeBgcImg('item3', "url('images/banner3.jpg') no-repeat")
	changeBgcImg('item4', "url('images/banner4.jpg') no-repeat")
	changeBgcImg('item5', "url('images/banner5.jpg') no-repeat")




</script>

	
</body>
</html>